<template>
  <div id="BacDrugUploadChina">
    <Breadcrumb content="全国耐药网上传" />
    <div class="bodyContent">
      <!-- vxe-toolbar -->
      <el-tabs type="border-card" @tab-click="tabHandleClick">
        <el-tab-pane label="细菌信息">
          <Splitpanes class="area">
            <Pane size="60">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input type="search" v-model="form.keyvalue" clearable class="vxeInputSearch" @search-click="findList" @clear="findList" @keyup.enter="findList" placeholder="关键字查询"></vxe-input>

                  <vxe-input type="date" v-model="form.startTime"></vxe-input> - <vxe-input type="date" v-model="form.endTime"></vxe-input>
                  <vxe-button type="text" class="button-blue" @click="findList" icon="vxe-icon-refresh" :loading="loading">查询</vxe-button>
                  <vxe-button type="text" class="button-blue" @click="uploadDrugs" icon="vxe-icon-upload" :loading="uploadLoading">上传</vxe-button>
                </template>
              </vxe-toolbar>
              <div class="tableBox">
                <vxe-table ref="tableRef" border="inner" align="left" class="mytable-scrollbar" :loading="loading" height="800px" :data="tableData" :row-config="{ isCurrent: true }" :column-config="{ resizable: true }" show-overflow keep-source :scroll-y="{ enabled: true }" @current-change="tableCellClick">
                  <vxe-column type="seq" title="#" width="30"></vxe-column>
                  <vxe-column field="name" title="姓名" width="90"> </vxe-column>
                  <vxe-column field="sex" title="性别" width="50"></vxe-column>
                  <vxe-column field="age" title="年龄" width="50"></vxe-column>
                  <vxe-column field="dateOfBirth" title="出生日期" width="90"> </vxe-column>
                  <vxe-column field="diagnosis" title="诊断" width="180"> </vxe-column>
                  <vxe-column field="dateOfVisit" title="申请日期" width="90"> </vxe-column>
                  <vxe-column field="wardName" title="科室名称" width="90"> </vxe-column>
                  <vxe-column field="specimenType" title="标本类型" width="90"> </vxe-column>
                  <vxe-column field="specimenName" title="标本类型名称" width="90"> </vxe-column>
                  <vxe-column field="organismCode" title="菌株编码" width="90"> </vxe-column>
                  <vxe-column field="organismName" title="菌株名称" width="90"> </vxe-column>
                  <vxe-column field="specimenCollectionDate" title="采样时间" width="120"> </vxe-column>
                  <vxe-column field="specimenCheckinDate" title="签收时间" width="120"> </vxe-column>
                  <vxe-column field="reportDate" title="报告时间" width="120"> </vxe-column>
                  <vxe-column field="remark3" title="上传返回信息" width="180"> </vxe-column>
                </vxe-table>
                <!-- <vxe-pager align="left" min-height="32px" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="[
                  'PrevJump',
                  'PrevPage',
                  'Number',
                  'NextPage',
                  'NextJump',
                  'Sizes',
                  'FullJump',
                  'Total'
                ]" @page-change="handleSizeChange($event)"></vxe-pager> -->
              </div>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label="耐药信息" name="first">
          <Splitpanes class="area">
            <Pane size="60">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input type="search" v-model="form.keyvalue" clearable class="vxeInputSearch" @search-click="findList" @clear="findList" @keyup.enter="findList" placeholder="关键字查询"></vxe-input>

                  <vxe-input type="date" v-model="form.startTime"></vxe-input> - <vxe-input type="date" v-model="form.endTime"></vxe-input>
                  <vxe-button type="text" class="button-blue" @click="findList" icon="vxe-icon-refresh" :loading="loading">查询</vxe-button>
                  <vxe-button type="text" class="button-blue" @click="uploadDrugs" :loading="uploadLoading" icon="vxe-icon-upload">上传</vxe-button>
                </template>
              </vxe-toolbar>
              <div class="tableBox">
                <vxe-table ref="tableRef111" border="inner" align="left" class="mytable-scrollbar" :loading="loading" height="800px" :data="tableDrugData" :row-config="{ isCurrent: true }" :column-config="{ resizable: true }" show-overflow keep-source :scroll-y="{ enabled: true }">
                  <vxe-column type="seq" title="#" width="30"></vxe-column>
                  <vxe-column field="antibioticCode" title="编码" width="120"> </vxe-column>
                  <vxe-column field="anitibioticCnname" title="名称" width="200"></vxe-column>
                  <vxe-column field="method" title="方法" width="50"></vxe-column>
                  <vxe-column field="fieldCode" title="" width="90"> </vxe-column>
                  <vxe-column field="testValue" title="结果" width="180"> </vxe-column>
                  <vxe-column field="testResult" title="敏感性" width="90"> </vxe-column>
                </vxe-table>
                <!-- <vxe-pager align="left" min-height="32px" :current-page.sync="page1.currentPage" :page-size.sync="page1.pageSize" :total="page1.totalResult" :layouts="[
                  'PrevJump',
                  'PrevPage',
                  'Number',
                  'NextPage',
                  'NextJump',
                  'Sizes',
                  'FullJump',
                  'Total'
                ]" @page-change="handleSizeChange1($event)"></vxe-pager> -->
              </div>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label="上传日志" name="second">
          <vxe-table ref="tableRef" border="inner" align="left" class="mytable-scrollbar" :loading="loading" height="800px" :data="tableDataLog" :row-config="{ isCurrent: true }" :column-config="{ resizable: true }" show-overflow keep-source :scroll-y="{ enabled: true }">
            <vxe-column type="seq" title="#" width="30"></vxe-column>
            <vxe-column field="realname" title="操作人" width="90"> </vxe-column>
            <vxe-column field="username" title="操作人工号" width="90"> </vxe-column>
            <vxe-column field="uploadTime" title="上传时间" width="150"></vxe-column>
            <vxe-column field="messageTime" title="数据时间段" width="150"></vxe-column>
            <vxe-column field="uploadGermCount" title="细菌上传条数" width="150"></vxe-column>
            <vxe-column field="uploadDrugCount" title="耐药上传条数" width="150"></vxe-column>
            <vxe-column field="message" title="返回结果" width="350" show-overflow-tooltip></vxe-column>
          </vxe-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 引入组件区 ==========
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import { AppStore } from '@/stores/store';
import moment from 'moment';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let store = AppStore();

// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];
// 分页
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});

let page1 = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});

//点击每页数量(分页查询)
function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  findList();
}

function handleSizeChange1({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page1.currentPage = 1;
  } else {
    page1.currentPage = currentPage;
  }
  page1.pageSize = pageSize;
  findDrugList();
}

const orgList = store.userInfo.orgList;
// 左侧表格:
const loading = ref(false); //刷新+表格加载
const uploadLoading = ref(false);
const form = reactive({
  keyvalue: '',
  orgId: store.userInfo.orgId,
  orgName: store.userInfo.orgName,
  startTime: moment().format('YYYY-MM-DD'),
  endTime: moment().format('YYYY-MM-DD')
}); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
const tableDataLog = reactive([]);
const tableDrugData = reactive([]);

// 右侧表单:
let currentRow: any = reactive({ id: '', code: '' });
let defaultProps = {
  children: 'children',
  label: 'name'
};

// 方法定义区 =============
onMounted(() => {
  findList(); //获取样本类型表格数据
});

// 获取 样本类型表格数据
const findList = () => {
  loading.value = true;
  tableData.length = 0; //放入数据前清空数据
  const url = '/bac_count/findChinaDrug';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { keyword: form.keyvalue, startTime: form.startTime + ' 00:00:00', endTime: form.endTime + ' 23:59:59', pageIndex: page.currentPage, pageSize: page.pageSize } })
    .then(async (res: any) => {
      tableData.push(...res.data);
      loading.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('获取耐药表型列表数据异常', VxeNotifyType.error);
    });
};

const findDrugList = () => {
  loading.value = true;
  tableDrugData.length = 0; //放入数据前清空数据
  const url = '/bac_count/findChinaDrugResult';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { keyword: form.keyvalue, startTime: form.startTime + ' 00:00:00', endTime: form.endTime + ' 23:59:59', pageIndex: page.currentPage, pageSize: page.pageSize } })
    .then(async (res: any) => {
      loading.value = false;
      tableDrugData.push(...res.data);
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('获取耐药表型列表数据异常', VxeNotifyType.error);
    });
};

function tabHandleClick(tab: any) {
  if (tab.props.name == 'second') {
    loading.value = true;
    tableDataLog.length = 0; //放入数据前清空数据
    const url = '/bac_count/findChinaDrugLog';
    proxy.$http
      //注意此处的数据条数
      .get(url)
      .then(async (res: any) => {
        loading.value = false;
        tableDataLog.push(...res.data);
      })
      .catch((err: any) => {
        loading.value = false;
        VxeMessage('获取日志数据异常', VxeNotifyType.error);
      });
  } else if (tab.props.name == 'first') {
    findDrugList();
  }
}

async function uploadDrugs() {
  if (tableData.length == 0) {
    VxeMessage('没有要上传的数据，请核实', VxeNotifyType.warning);
    return;
  }
  const type = await VXETable.modal.confirm('确定要上传' + form.startTime + '到' + form.endTime + '共' + tableData.length + '条数据吗？');
  if (type === 'confirm') {
    uploadLoading.value = true;
    const data = {
      startTime: form.startTime + ' 00:00:00',
      endTime: form.endTime + ' 23:59:59'
    };
    const url = '/bac_count/uploadDrugChina';
    proxy.$http
      .post(url, data)
      .then((res: any) => {
        uploadLoading.value = false;
        if (res.status.code === 1) {
          VxeMessage('上传成功', VxeNotifyType.success);
        } else {
          VxeMessage(res.status.msg, VxeNotifyType.error);
        }
      })
      .catch((err) => {
        uploadLoading.value = false;
        proxy.$XModal.message({ content: '上传出现异常', status: 'error' });
      });
  }
}
</script>
<style lang="scss" scoped>
#BacDrugUploadChina {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    .splitpanes {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBox {
        height: calc(100% - 40px);
      }
    }
  }
}
</style>
